<html manifest="index.manifest">
    <head>
        <meta charset="utf-8">
        <title>打胖胖</title>
        <style>
            body{
                overflow: hidden;
                background-image: url(image/bg.jpg);
                /*cursor:改变鼠标的样式
                使用url来自定义鼠标样式，图片不要太大，比如：32*32,128*128
                auto：防止图片防止加载时，使用鼠标默认样式*/
                cursor: url(image/cursor.png),auto;

                /*禁止用户选择页面上的内容*/
                user-select:none;
                /*webkit前缀是谷歌浏览器的私有属性*/
                -webkit-user-select: none;
                /*moz前缀是火狐浏览器的私有属性*/
                -moz-user-select: none;
            }
            #score{
                position: absolute;
                top:30px;
                left: 0;
                background-color: #aaa;
                /*设置内边距：两个值分别表示 上下 和 左右方向*/
                padding: 10px 20px;
            }
            table{
                width: 600px;
                height: 600px;
                /*水平方向居中显示
                定宽居中：宽度固定，左右外边距设置为auto*/
                /*margin两个值分别表示，上下方向 和 左右方向*/
                margin: 0 auto;
            }
            td{
                /*background-color: red;*/
                width: 150px;
                height: 150px;
                background-image: url(image/hole.png);
                /*设置背景图的大小，两个值分别作用于 宽和高*/
                background-size: 120px 60px;
                background-repeat: no-repeat;
                /*设置背景图的位置，两个值分别作用于 水平和垂直方向*/
                background-position: center bottom;
                /*设置居中*/
                text-align: center;
                /*设置垂直方向的对齐方式，vertical 垂直*/
                vertical-align: bottom;
            }
            /*'>'表示父子关系*/
            /*找到td所有的子元素img*/
            td>img{
                height: 0px;
                width: 90px;
                /*设置定位方式为相对定位*/
                position: relative;
                bottom: 15px;
            }

            .up{
                /*添加动画：动画名 动画时间（秒） 速度（匀速） 保持动画结束时的状态*/
                animation: up 0.3s linear forwards;
            }
            /*地鼠出现的动画*/
            @keyframes up{
                0%{
                    height: 0;
                }
                100%{
                    height: 100px;
                }
            }
            .down{
                animation: down 0.1s linear forwards;
            }
            /*地鼠隐藏的动画*/
            @keyframes down{
                0%{height: 100px;}
                100%{height: 0;}
            }
        </style>
    </head>
    <body>
        <!--autoplay 自动播放，loop 循环-->
        <audio src="audio/music.mp3" autoplay loop></audio>
        <!--添加打中的声音-->
        <audio id="dazhong"></audio>
        <p id="score">得分：0</p>
        <!--用来定义表格-->
        <table>
            <!--tr 定义表格的行-->
            <tr>
                <!--td 定义单元格-->
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
            </tr>
            <!--(tr>(td>img[src=image/pang.png])*4)*3   光标放在3后按Tab键-->
            <tr>
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
            </tr>
            <tr>
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
            </tr>
            <tr>
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
                <td><img src="image/pang.png" alt=""></td>
            </tr>
        </table>
        <!--引用jquery-->
        <script src="jquery-3.1.1.js"></script>
        <script src="game.js"></script>
    </body>
</html>